<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:fn="http://java.sun.com/jsp/jstl/functions"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/admin/template.xhtml"
                xmlns:framework="http://java.sun.com/jsf/composite/components">
    <ui:define name="title">#{msg['blog']['articleManage']}</ui:define>
    <ui:define name="viewname">
        <li>#{msg['blog']['content']}</li>
        <li>/</li>
        <li>#{msg['blog']['articleManage']}</li>
    </ui:define>
    <ui:define name="content">
        <div class="card">
            <h:form id="article_form" prependId="false">
                <framework:dataTable id="article" formDialogId="article" lazy="true"
                                     headText="#{msg['blog']['articleManage']}"
                                     value="#{controller.dataModel}"
                                     singleSelection="#{viewScope.sinSelected}"
                                     multipleSelection="#{viewScope.mulSelected}">

                    <p:column field="seq" headerText="#{msg['blog']['seq']}"/>

                    <p:column field="title" headerText="#{msg['blog']['title']}"/>

                    <p:column field="type" headerText="#{msg['blog']['contentType']}"/>

                    <p:column field="status" headerText="#{msg['blog']['contentStatus']}"/>

                    <p:column field="creator" headerText="#{msg['framework']['creator']}"/>

                </framework:dataTable>
            </h:form>
        </div>
    </ui:define>

    <ui:define name="dialog">
        <h:form id="dialog_form">
            <framework:dialog id="article" value="#{viewScope.vo}" fullScreen="true"
                              saveUpdate="@widgetVar(article_dataTable)"
                              contentStyleClass="p-d-flex p-jc-center p-ai-start">

                <p:outputPanel styleClass="p-md-9 ui-fluid">
                    <framework:label value="#{msg['blog']['title']}">
                        <p:inputText value="#{viewScope.vo.title}" required="true"/>
                    </framework:label>

                    <framework:label>
                        <framework:textEditor value="#{viewScope.vo.text}" secure="false" height="596"/>
                    </framework:label>

                    <p:fieldset legend="#{msg['blog']['otherConfigs']}" collapsed="true" toggleable="true"
                                toggleSpeed="500" styleClass="p-m-2">
                        <ui:include src="../include/repeatFields.xhtml">
                            <ui:param name="fields" value="#{viewScope.fields.keySet()}"/>
                        </ui:include>
                    </p:fieldset>


                </p:outputPanel>
                <p:outputPanel styleClass="p-md-3 ui-fluid">
                    <framework:label value="#{msg['blog']['category']}">
                        <p:inputText value="#{msg['framework']['noRecords']}"
                                     rendered="#{fn:length(viewScope.categories.children) == 0}"
                                     disabled="true"/>
                        <p:tree id="perms" rendered="#{fn:length(viewScope.categories.children) != 0}"
                                value="#{viewScope.categories}" style="max-height: 250px; overflow: auto" highlight="20"
                                selectionMode="single"
                                var="node" datakey="#{node.id}" selection="#{viewScope.vo.categoryNode}">
                            <p:treeNode>
                                <h:outputText value="#{node.name}"/>
                            </p:treeNode>
                        </p:tree>
                    </framework:label>
                    <framework:label value="#{msg['blog']['tag']}">
                        <p:chips value="#{viewScope.vo.tags}"/>
                    </framework:label>

                    <p:divider align="center" type="dashed">
                        <b>#{msg['blog']['advanced']}</b>
                    </p:divider>

                    <framework:label value="#{msg['blog']['contentStatus']}">
                        <p:selectOneMenu value="#{viewScope.vo.status}" converter="#{contentStatusConverter}">
                            <f:selectItems value="#{viewScope.statuses}" var="status"
                                           itemLabel="#{msg['contentStatus'][status.title]}" itemValue="#{status}"/>
                        </p:selectOneMenu>
                    </framework:label>

                    <framework:label value="#{msg['blog']['password']}" rendered="#{viewScope.vo.status eq 'PASSWORD'}">
                        <p:inputText value="#{viewScope.vo.password}" required="true"/>
                    </framework:label>

                    <framework:label>
                        <p:selectBooleanCheckbox id="allowComment" value="#{viewScope.vo.allowComment}"/>
                        <p:outputLabel for="allowComment" value="#{msg['blog']['allowComment']}" styleClass="p-ml-3"/>
                    </framework:label>

                    <framework:label>
                        <p:selectBooleanCheckbox id="allowPing" value="#{viewScope.vo.allowPing}"/>
                        <p:outputLabel for="allowPing" value="#{msg['blog']['allowPing']}" styleClass="p-ml-3"/>
                    </framework:label>

                    <framework:label>
                        <p:selectBooleanCheckbox id="allowFeed" value="#{viewScope.vo.allowFeed}"/>
                        <p:outputLabel for="allowFeed" value="#{msg['blog']['allowFeed']}" styleClass="p-ml-3"/>
                    </framework:label>

                    <p:divider align="center" type="dashed">
                        <b>#{msg['blog']['attachment']}</b>
                    </p:divider>

                    <framework:upload widgetVar="test" value="#{viewScope.vo.attachments}"
                                      listener="#{controller.onFileUpload}" allowTypes="/(\.|\/)(txt|doc?x)$/"
                                      layout="custom">
                        <p:outputPanel layout="block" styleClass="p-m-2 p-d-flex p-ac-center p-jc-between">
                            <h:outputText value="#{status.index+1}. #{element.title}"/>
                            <p:commandLink style="width: 18px;height: 18px;" process="@this" update="@widgetVar(test)"
                                           action="#{controller.onFileRemove(status.index)}">
                                <i class="pi pi-times-circle" style="font-size: 18px"/>
                            </p:commandLink>
                        </p:outputPanel>
                    </framework:upload>

                    <p:divider rendered="#{viewScope.vo.id ne null}" align="center" type="dashed">
                        <b>#{msg['blog']['signature']}</b>
                    </p:divider>

                    <p:outputPanel rendered="#{viewScope.vo.id ne null}">
                        <h:outputText style="display: block" escape="false"
                                      value="#{msg['blog'][['byAuthor',viewScope.vo.creator]]}"/>
                        <h:outputText value="#{msg['blog']['byModifyTime']} "/>
                        <h:outputText value="#{viewScope.vo.operatedTime}">
                            <f:convertDateTime type="localDateTime" pattern="#{msg['format']['dataZh']}"/>
                        </h:outputText>
                    </p:outputPanel>

                </p:outputPanel>
            </framework:dialog>
        </h:form>
    </ui:define>
</ui:composition>